<template>
    <div class="row">
        <!-- 表格 -->
        <div class="col-md-12">
            <table class="table table-striped table-hover table-bordered">
                <thead>
                    <tr>
                        <th scope="col">序号</th>
                        <th scope="col">学习科目</th>
                        <th scope="col">学习内容</th>
                        <th scope="col">学习地点</th>
                        <th scope="col">完成状态</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 循环数据列表 -->
                    <tr v-for="(item, index) in listDate" :key="index">
                        <th scope="row">{{ index + 1 }}</th>
                        <td>{{ item.subject }}</td>
                        <td>{{ item.content }}</td>
                        <td>
                            <!-- {{ item.place }} -->
                            <div v-for="value in placeDate" :key="i">
                                <span v-if="item.place == value.id">{{ value.name }}</span>
                            </div>
                        </td>
                        <td>
                            <!-- 开关按钮 -->
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch"
                                    id="flexSwitchCheckDefault" :checked="item.status">
                                <label v-if="item.status == 0" class="form-check-label"
                                    for="flexSwitchCheckDefault">未完成</label>
                                <label v-else class="form-check-label" for="flexSwitchCheckDefault">已完成</label>
                            </div>
                        </td>
                        <td><button type="button" class="btn btn-danger">删除</button></td>
                    </tr>
                    <!-- <tr>
                        <th scope="row">2</th>
                        <td>《Vue.js框架技术》</td>
                        <td>自定义指令</td>
                        <td>图书馆</td>
                        <td>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch"
                                    id="flexSwitchCheckDefault" checked>
                                <label class="form-check-label" for="flexSwitchCheckDefault">已完成</label>
                            </div>
                        </td>
                        <td><button type="button" class="btn btn-danger">删除</button></td>
                    </tr> -->
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
export default {

    props: ["listDate", "placeDate"],
    data() {
        return {

        }
    },
    created() {

    }
}
</script>
<style></style>